{include file="common/head" /}
<body>
<div class="x-body" >
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="L_name" class="layui-form-label">
                <span class="x-red">*</span>商品名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_name" name="name" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>图片
            </label>
            <a class="layui-btn" id="image" style="float: left;"><i class="layui-icon">&#xe67c;</i>上传图片</a>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <img src="" id="thumb" alt="" width="200" height="200" style="margin-left: 110px;display: none" >
                <input type="hidden" name="url" value="" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_price" class="layui-form-label">
                <span class="x-red">*</span>价格(元)
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_price" name="price" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_stock" class="layui-form-label">
                <span class="x-red">*</span>库存量(束)
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_stock" name="stock" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_stock" class="layui-form-label">
                <span class="x-red">*</span>分类
            </label>
            <div class="layui-input-block">
                <select name="category_id" lay-verify="required">
                    {volist name="cates" id="cate"}
                    <option value="{$cate.id}">{$cate.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_type" class="layui-form-label">
                <span class="x-red">*</span>类别
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_type" name="type" lay-verify="required"
                       autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_material" class="layui-form-label">
                <span class="x-red">*</span>材料
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_material" name="material" lay-verify="required"
                       autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_pack" class="layui-form-label">
                <span class="x-red">*</span>包装
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_pack" name="pack" lay-verify="required"
                       autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_language" class="layui-form-label">
                <span class="x-red">*</span>花语
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_language" name="language" lay-verify="required"
                       autocomplete="off" class="layui-input" value="">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>商品详情图
            </label>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <img src="/static/images/img_add.png" class="multiply1" alt="" width="100" height="100" style="margin-left: 110px;" >
                <input type="hidden" name="one_url" value="" lay-verify="required">
            </div>
            <div class="layui-input-inline" style="width: 80px">
                <img src="/static/images/img_add.png" class="multiply2" alt="" width="100" height="100" >
                <input type="hidden" name="two_url" value="" lay-verify="required">
            </div>
            <div class="layui-input-inline" style="width: 80px">
                <img src="/static/images/img_add.png" class="multiply3" alt="" width="100" height="100" >
                <input type="hidden" name="three_url" value="" lay-verify="required">
            </div>
            <div class="layui-input-inline" style="width: 80px">
                <img src="/static/images/img_add.png" class="multiply4" alt="" width="100" height="100" >
                <input type="hidden" name="four_url" value="" lay-verify="required">
            </div>
            <div class="layui-input-inline">
                <img src="/static/images/img_add.png" class="multiply5" alt="" width="100" height="100" >
                <input type="hidden" name="five_url" value="" lay-verify="required">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="L_summary" class="layui-form-label">
                摘要
            </label>
            <div class="layui-input-block">
                <textarea name="summary" placeholder="请输入内容" id="L_summary" class="layui-textarea" lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                增加
            </button>
        </div>
    </form>
</div>
<script>
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

//        //自定义验证规则
//        form.verify({
//            nikename: function(value){
//                if(value.length < 5){
//                    return '昵称至少得5个字符啊';
//                }
//            }
//            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
//            ,repass: function(value){
//                if($('#L_pass').val()!=$('#L_repass').val()){
//                    return '两次密码不一致';
//                }
//            }
//        });

        //监听提交
        form.on('submit(add)', function(data){
            console.log(data.field);
            $.post('/admin/goods_add',{
                name:data.field.name,
                main_img_url:data.field.url,
                price:data.field.price,
                stock:data.field.stock,
                category_id:data.field.category_id,
                summary:data.field.summary,
                type:data.field.type,
                material:data.field.material,
                pack:data.field.pack,
                language:data.field.language,
                one_url:data.field.one_url,
                two_url:data.field.two_url,
                three_url:data.field.three_url,
                four_url:data.field.four_url,
                five_url:data.field.five_url
            },function (ret) {
                if(ret.code == 1){
                    layer.alert(ret.msg, {icon: 6},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    });
                }else{
                    layer.alert(ret.msg, {icon: 5});
                }
            });
            return false;
        });


    });
</script>
<script>
    layui.use('upload',function(){
        var upload = layui.upload,
            jq = layui.jquery;
        upload.render({
            url: '{:url("admin/upload")}'
            ,elem:'#image'
            ,ext: 'jpg|png|gif'
            ,area: ['200', '200px']
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                $("#thumb").attr('src','/images/'+res.saveName);
                $("input[name=url]").val(res.saveName);
                $("#thumb").css('display','block');
                layer.msg(res.msg, {icon: 1, time: 1000});
            }
        });

    })

    layui.use('upload',function(){
        var upload = layui.upload,
            jq = layui.jquery;
        upload.render({
            url: '{:url("admin/upload")}'
            ,elem:'.multiply1'
            ,ext: 'jpg|png|gif'
            ,area: ['200', '200px']
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                $(".multiply1").attr('src','/images/'+res.saveName);
                $("input[name=one_url]").val(res.saveName);
                layer.msg(res.msg, {icon: 1, time: 1000});
            }
        });
        upload.render({
            url: '{:url("admin/upload")}'
            ,elem:'.multiply2'
            ,ext: 'jpg|png|gif'
            ,area: ['200', '200px']
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                $(".multiply2").attr('src','/images/'+res.saveName);
                $("input[name=two_url]").val(res.saveName);
                layer.msg(res.msg, {icon: 1, time: 1000});
            }
        });

        upload.render({
            url: '{:url("admin/upload")}'
            ,elem:'.multiply3'
            ,ext: 'jpg|png|gif'
            ,area: ['200', '200px']
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                $(".multiply3").attr('src','/images/'+res.saveName);
                $("input[name=three_url]").val(res.saveName);
                layer.msg(res.msg, {icon: 1, time: 1000});
            }
        });

        upload.render({
            url: '{:url("admin/upload")}'
            ,elem:'.multiply4'
            ,ext: 'jpg|png|gif'
            ,area: ['200', '200px']
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                $(".multiply4").attr('src','/images/'+res.saveName);
                $("input[name=four_url]").val(res.saveName);
                layer.msg(res.msg, {icon: 1, time: 1000});
            }
        });

        upload.render({
            url: '{:url("admin/upload")}'
            ,elem:'.multiply5'
            ,ext: 'jpg|png|gif'
            ,area: ['200', '200px']
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                $(".multiply5").attr('src','/images/'+res.saveName);
                $("input[name=five_url]").val(res.saveName);
                layer.msg(res.msg, {icon: 1, time: 1000});
            }
        });

    })
</script>
</body>

</html>